<script setup lang="ts">
import {computed, reactive, ref, toRefs} from 'vue'
import api from "@/api";
import {onLoad} from "@dcloudio/uni-app";
import type {OrderCreateResType, OrderIndexParamsType} from "@/types/order";
import { timeFormat } from '@/utils/common'

const list = reactive([
  {
    name: '当日订单',
    slug: 'today'
  },
  {
    name: '全部订单',
    slug: 'all'
  },
  {
    name: '退单',
    slug: 'refund'
  }
])

const change = (e) => {
  queryParams.page = 1
  queryParams.order_status = e.slug
  orderList.length = 0
  loadStatus.value = 'loadmore'
  getOrderList()
}
// 请求参数
const queryParams = reactive<OrderIndexParamsType>({
  page: 1,
  limit: 5,
  order_status: 'today',
})

const loadStatus = ref<'loadmore' | 'loading' | 'nomore'>('loadmore');


const getOrderList = async () => {
  if(loadStatus.value === 'loading'|| loadStatus.value === 'nomore'){
    return;
  }
  loadStatus.value = 'loading'
  await api.order.indexApi(queryParams).then((res:ApiResponse<PageResult<OrderCreateResType[]>>) => {
    orderList.push(...res.data.data)
    console.log('queryParams', queryParams.page)
    if(queryParams.page < res.data.last_page ){
      loadStatus.value = 'loadmore'
      queryParams.page++
    }else{
      loadStatus.value = 'nomore'
    }
  })
}
const orderList:OrderCreateResType[] = reactive([])

// 价格小数部分
const priceDecimal = computed(() => {
  return (val: number | string): string => {
    const num = typeof val === 'string' ? parseFloat(val) : val;

    if (isNaN(num)) {
      return '00';
    }

    if (!Number.isInteger(num)) {
      const parts = num.toString().split('.');
      return parts.length > 1 ? parts[1].padEnd(2, '0').slice(0, 2) : '00';
    }
    return '00';
  };
});

// 价格整数部分
const priceInt = computed(() => {
  return (val: number | string): string => {
    const num = typeof val === 'string' ? parseFloat(val) : val;

    if (isNaN(num)) {
      return '0';
    }

    if (!Number.isInteger(num)) {
      return num.toString().split('.')[0];
    }
    return num.toString();
  };
});

// 单个订单的产品的总件数
const totalNum = (list:OrderCreateResType[])=>{
  let num = 0
  list.forEach(item => {
    num += item.goods_num
  })
  return num;
}
const onReachBottom = () => {
  console.log('触底了')
  getOrderList()
}


const toPay = (order:OrderCreateResType)=>{
  uni.navigateTo({
    url: `/pages/pay/index?id=${order.id}&type=goods`
  })
}

onLoad(() => {
  getOrderList()
})

</script>
<template>
  <view>
    <view class="wrap">
      <view class="u-tabs-box">
        <up-tabs activeColor="#f29100" ref="tabs" :list="list" :current="current" @change="change"
                 :is-scroll="false" swiperWidth="750"></up-tabs>
      </view>
      <swiper class="swiper-box">
        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 100%;width: 100%;  padding-bottom: 100rpx;" @scrolltolower="onReachBottom">
            <view class="page-box">
              <view class="order" v-for="(order, index) in orderList" :key="order.id">
                <view class="top">
                  <view class="left">
                    <up-tag v-show="order.type==='delivery'" :text="order.type_text" color="#fff" type="warning"></up-tag>
                    <up-tag v-show="order.type==='dine_in'" :text="order.dining_type_text" color="#fff" type="warning"></up-tag>
<!--                    <view class="store">奶茶店</view>-->
                    <up-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></up-icon>
                  </view>
                  <view class="right">{{ order.status_text }}</view>
                </view>
                <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
                  <view class="item">
                    <view class="goods-box" v-for="(item, index) in order.items" :key="index">
                      <view>
                        <view class="left">
                          <image :src="item.goods_image_url" mode="aspectFill"></image>
                        </view>
                        <view class="content">
                          <view class="title u-line-1">{{ item.goods_name }}</view>
                        </view>
                      </view>

                    </view>

                  </view>
                </scroll-view>


                <view class="price-box">
                  <view class="time">{{ timeFormat(order.create_time) }}</view>
                  <view class="total">
                    共{{ totalNum(order.items) }}件
                    <text class="total-price">
                      ￥{{ priceInt(order.pay_fee) }}.
                      <text class="decimal">{{ priceDecimal(order.pay_fee) }}</text>
                    </text>
                  </view>
                </view>

                <view class="bottom">
                  <view class="more"><up-icon name="more-dot-fill" color="rgb(203,203,203)"></up-icon>
                  </view>
                  <view v-if="order.status==='unpaid'" class="btn" @tap="toPay(order)">支付</view>
                  <view class="evaluate btn">再来一单</view>
                </view>
              </view>
              <up-loadmore :status="loadStatus" bgColor="#f2f2f2"></up-loadmore>
            </view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<style>
/* #ifndef H5 */
page {
  height: 100%;
  background-color: #f2f2f2;
}

/* #endif */
</style>

<style lang="scss" scoped>
.order {
  width: 710rpx;
  background-color: #ffffff;
  margin: 20rpx auto;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 20rpx;
  font-size: 28rpx;

  .top {
    display: flex;
    justify-content: space-between;

    .left {
      display: flex;
      align-items: center;

      .store {
        margin: 0 10rpx;
        font-size: 32rpx;
        font-weight: bold;
      }
    }

    .right {
      color: $u-warning-dark;
    }
  }

  .goods-box {
    display: flex;
  }

  .item {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin: 20rpx 0 0;

    .left {
      margin-right: 20rpx;

      image {
        width: 150rpx;
        height: 150rpx;
        border-radius: 10rpx;
      }
    }

    .content {
      .title {
        font-size: 28rpx;
        line-height: 50rpx;
        max-width: 150rpx;
      }

      .type {
        margin: 10rpx 0;
        font-size: 24rpx;
        color: $u-tips-color;
      }

      .delivery-time {
        color: #e5d001;
        font-size: 24rpx;
      }
    }

    .right {
      margin-left: 10rpx;
      padding-top: 20rpx;
      text-align: right;

      .decimal {
        font-size: 24rpx;
        margin-top: 4rpx;
      }

      .number {
        color: $u-tips-color;
        font-size: 24rpx;
      }
    }
  }

  .total {
    //margin-top: 20rpx;
    text-align: right;
    font-size: 24rpx;

    .total-price {
      font-size: 32rpx;
    }
  }

  .bottom {
    display: flex;
    margin-top: 40rpx;
    padding: 0 10rpx;
    justify-content: space-between;
    align-items: center;

    .btn {
      line-height: 52rpx;
      width: 160rpx;
      border-radius: 26rpx;
      border: 2rpx solid $u-border-color;
      font-size: 26rpx;
      text-align: center;
      color: $u-info-dark;
    }

    .evaluate {
      color: $u-warning-dark;
      border-color: $u-warning-dark;
    }
  }
}

.centre {
  text-align: center;
  margin: 200rpx auto;
  font-size: 32rpx;

  image {
    width: 164rpx;
    height: 164rpx;
    border-radius: 50%;
    margin-bottom: 20rpx;
  }

  .tips {
    font-size: 24rpx;
    color: #999999;
    margin-top: 20rpx;
  }

  .btn {
    margin: 80rpx auto;
    width: 200rpx;
    border-radius: 32rpx;
    line-height: 64rpx;
    color: #ffffff;
    font-size: 26rpx;
    background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
  }
}

.wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--window-top));
  width: 100%;
}

.swiper-box {
  flex: 1;
}

.swiper-item {
  height: 100%;
}

.price-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
</style>